<script setup>
import { inject, onMounted, ref, shallowRef } from "vue";

const getAssetsFile = inject("getAssetsFile");

const props = defineProps({
	title: {
		type: String,
		default: () => {
			return "";
		},
	},
	list: {
		type: Array,
		default: () => {
			return [];
		},
	},
});
</script>

<template>
	<div class="content">
		<div class="mainTitle flex flex_between align_itemsCenter">
			<span class="mainTitleSpan">
				{{ props.title }}
			</span>
		</div>
		<div class="details flex align_itemsCenter">
			<div style="height: 100%; width: 100%">
				<img
					v-for="item in props.list"
					:src="item.imgUrl"
					alt=""
					style="cursor: pointer; object-fit: fill; height: 100%; width: calc(20% - 10px); margin-right: 10px" />
			</div>
		</div>
	</div>
</template>

<style scoped>
.content {
	width: 100%;
}
.mainTitle {
	width: 100%;
	height: 33px;
	/* margin-bottom: 8px; */
	border-bottom: 2px solid var(--primary-color);
}
.mainTitleSpan {
	display: block;
	float: left;
	overflow: hidden;
	width: 134px;
	font-size: 18px;
	padding-left: 10px;
	box-sizing: border-box;
	line-height: 33px;
	color: #fff;
	background: url("@/assets/img/content/mainPage/titleBg.png") no-repeat;
	background-size: 100% 100%;
}

.details {
	height: calc(100% - 45px - 80px);
	width: calc(100% - 80px);
	background: #dddddd;
	padding: 40px 40px;
}
</style>
